<template>
	<view>
		<view class="content" :style="{'margin-top':indexItem==0?'10rpx':'10rpx','padding-bottom':indexItem==nameList.length-1?'120rpx':'0rpx'}" v-for="(nameItem,indexItem) in nameList">
			<text class="title">{{nameItem}}</text>
			<view class="items" v-for="(item,index) in data" :key="index" v-if="nameItem == item.moduleName">
				<checkbox-group @change="checkboxChange($event,index,item)">
				
					<label >
						<checkbox :value="item.id" :checked="item.isMark"  backgroundColor="#F7F8FA"	activeBackgroundColor="#2979ff" activeBorderColor="#" iconColor="#FFFFFF" />
					</label>
				</checkbox-group>
				<view class="detail">
					<text class="name">{{item.resourceName}}</text>
					<!-- {{shijiancdu}} -->
					<view class="trainInfo"  v-if="item.isMark==true&&(tabarTitle == '听说'||tabarTitle == '听力')">
						已选择 <text class="label">{{item.tnum}}</text> 个大题，预计<text>{{item.minute}}</text>分钟，总分 <text class="label">{{item.totalScore}}</text>
					</view>
					<view class="trainInfo">
						得分率 <text class="label">{{item.scoringrate}}</text> ，总使用次数 <text class="label">{{item.usenum}}</text> 次
					</view>
				</view>
				<image class="editor" src="@/static/editor.png" mode="aspectFit" @tap="openEditor(item.versionId,item.resourceName,item,index)">
				</image>
				<image v-if="item.usenum>0" class="arranged" src="@/static/arranged.png" mode="aspectFit"></image>
			</view>
		
		
			<!-- 	<view class="items" v-for="(item,index) in data" :key="index">
				<checkbox-group @change="checkboxChange">
					<label>
						<checkbox value="cb" :checked="isMark" backgroundColor="#F7F8FA" activeBackgroundColor="#2979ff"
							activeBorderColor="#" iconColor="#FFFFFF" />
					</label>
				</checkbox-group>
				<view class="detail">
					<text class="name">听选信息 M1A</text>
					<view class="trainInfo">
						得分率 <text class="label">61%</text> ，总使用次数 <text class="label">15</text> 次
					</view>
				</view>
				<image class="editor" src="@/static/editor.png" mode="aspectFit" @tap="openEditor"></image>
				<image v-if="true" class="arranged" src="@/static/arranged.png" mode="aspectFit"></image>
			</view> -->
		
		
			
		</view>
		<view v-if="xuanzhede.length!=0">
<!--			<ProcessTime :time='shijiancdu' :number='jige' @handleEvent="handleClickModal" :isIos="isIos"-->
<!--				@handleEvent2="handleClickNext" />-->
			<view class="footer" :class="isIos?'footerIos':''">
				<view class="footer-time" @tap="handleClickModal">
					<image class="footer-icon"
					       src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e519f234606e4b18937477cea78b8cd3_mergeImage.png"
					       mode="aspectFit">
					</image>
					
					<text class="footer-number">{{jige}}</text>
					<text class="footer-text">预计 <text class="footer-blue">{{shijiancdu}}</text> 分钟</text>
				</view>
				<view class="footer-next" @tap="handleClickNext">
					下一步
				</view>
			</view>
			
			<uni-popup class="popup" ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
				<view class="popup-top">
					<text class="popup-title">
						已选择内容
					</text>
					<text class="popup-close" @tap="handleClosePopup">
						取消
					</text>
				</view>
				<view class="popup-content">
					<view class="popup-items" v-for="(item,index) in xuanzhede" :key="index">
						<text class="popup-course">
							<!-- 课后单词表-Starter Module -->
							{{item.resourceName}}
						</text>
						<text class="popup-delete" @tap="handleDeleteItem(index)">
							删除
						</text>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import ProcessTime from '@/components/ProcessTime/index.vue';


	export default {
		components: {
			ProcessTime,
		},
		data() {
			return {
				// isMark: false,
				checkType:0,
				id: '',
				pid: '',
				name: '',
				data: [],
				page: 1,
				pageSize: 10,
				selectAllChange: [],
				jige: 0,
				shijiancdu: 0,
				xuanzhdeshuus: [],
				xuanzhede:[],
				xuanzhede_ti:[],
				shujusAll:[],
				isIos:false,
				nameList:[]
				
			}
		},
		onLoad(option) {

			this.id = parseInt(option.id)
			this.pid = parseInt(option.typd)
			this.tabarTitle = option.title
			this.textbook()
			
		},
		onShow(){
			this.chongxinjisuan();
		},
		methods: {
			chongxinjisuan(){
				this.xuanzhede = uni.getStorageSync('xuanzhede') || []; ///从本地缓存中同步移除指定key的数据
				this.xuanzhede_ti = uni.getStorageSync('xuanzhede_ti') || [];
				console.log("===id",this.xuanzhede_ti)
				if(this.xuanzhede_ti&&this.xuanzhede_ti.length>0){
					this.xuanzhede_ti.forEach((item,indecs)=>{
						if(this.xuanzhede.length==0){
							this.data.forEach((keitemss)=>{
								if(item.versionId == keitemss.kechengId){
									this.xuanzhede.push(keitemss)
								}
							})
						}
						let xuanzhongArr = []
						this.xuanzhede.map((items)=>{
							console.log(this.xuanzhede,this.data,"====item.pid == items.productId",item.pid == items.productId)
							this.data.forEach((itemdata,indexdata)=>{
								if(itemdata.versionId == items.versionId){
									xuanzhongArr.push(indexdata);
								}
							})
							let finalScore = 0;
							if(this.tabarTitle == '听说'||this.tabarTitle == '听力'){
								console.log("====xuanzhongArr",xuanzhongArr)
								
								if(this.shujusAll.length>0){
									console.log(this.shujusAll,"====xuanzhongArr",this.xuanzhede_ti)
									this.xuanzhede_ti[indecs].ti.forEach((item) => {
										xuanzhongArr.forEach((itemindex)=>{
											this.shujusAll[itemindex][Number(item)].scores.forEach((shujusItems)=>{
												finalScore += shujusItems.score
											})
										})
									});
								}
								if(item.kechengId == items.versionId){
									items.tnum = item.ti.length;
									items.minute = item.ti.length*3;
									items.totalScore = finalScore;
								}
							}
							//console.log("item====item",this.xuanzhede);
						})
					})
				}
				uni.setStorageSync("xuanzhede",this.xuanzhede)
				this.shijiancdu = this.totalSum(this.xuanzhede,'minute')
				this.jige=this.xuanzhede.length
				if(this.xuanzhede.length==0){
					this.xuanzhede_ti.forEach(item=> {
						this.data.map((items, index) => {
							//console.log("===item.productId == items.productId", item.productId == items.productId)
							if (items.versionId == item.kechengId) {
								item.isMark = true;
								this.xuanzhede.push(items)
								
							}
						})
					})
					//console.log("222items",this.xuanzhede)
				}else{
					this.xuanzhede.forEach(item=>{
						this.data.map((items,index)=>{
							//console.log("===item.productId == items.productId",item.productId == items.productId)
							if(item.versionId == items.versionId){
								item.isMark = true;
								this.data.splice(index, 1, item)
								console.log("111items",this.data)
							}
						})
					})
				}
				const systemInfo = uni.getSystemInfoSync()
				if (systemInfo.osName === 'ios') {
					this.isIos = true
				}  //苹果
				if (systemInfo.osName === 'android') {
					this.isIos = false
				}  //安卓
			},
			/**,
			 * 计算给定字段的总计
			 * @param {Array} array 对象数组数据
			 * @param {String} computedField  需要进行合计的字段名
			 * @return {Number} 合计后的结果
			 */
			 totalSum(array, computedField) {
			    if (!array || array.length === 0) {
			        return 0
			    } else {
			        return array.reduce((value, item) => value + +item[computedField], 0)
			    }
			},
/**
			 * 计算给定字段的总计结束**/
			handleDeleteItem(e) {
				
				let delItem = this.xuanzhede[e]
				this.xuanzhede.splice(e,1)
					this.shijiancdu = this.totalSum(this.xuanzhede,'minute')
					this.jige = this.xuanzhede.length
				// //console.log()
				this.data.forEach(item=>{
					
					if(item.versionId==delItem.versionId) item.isMark = false
				})
				uni.setStorageSync('xuanzhede', this.xuanzhede);
			


			},

			textbook() {
				var that = this

				var data = {
					id: that.id,
					pid: that.pid,
					page: that.page,
					pageSize: that.pageSize,
				}
				let url = "";
				if(this.tabarTitle == '听说'){
					url = "hearsay/chapterdetail";
				}
				if(this.tabarTitle == '听力'){
					url = "listening/chapterdetail";
				}
				if(this.tabarTitle == '跟读'){
					url = "repeat/chapterdetail_teacher";
				}
				if(this.tabarTitle == '笔试'){
					url = "writing/chapterdetail";
				}
				if(this.tabarTitle == '音标'){
					url = "soundmark/chapterdetail_teacher";
				}
				if(this.tabarTitle == '典范'){
					url = "modelsp/chapterdetail_teacher";
				}
				if(this.tabarTitle == '新概念'){
					url = "newconcept/chapterdetail_teacher";
				}
				if(this.tabarTitle == '黑布林'){
					url = "blackplum/chapterdetail";
				}
				that.$post(url, data).then(res => {
					if (res.code != 0) {						
						uni.setNavigationBarTitle({
							title: res.data.name,
						});
						that.name = res.data					
						// 后台返回的数组
						//console.log(res.data,'教程章节详情hearsay/chapterdetail')
						let dataArr = [];
						
						if(this.tabarTitle == '听说'){
							dataArr = res.data.hsr;
						}
						if(this.tabarTitle == '听力'){
							dataArr = res.data.lr;
						}
						if(this.tabarTitle == '跟读'){
							dataArr = res.data.rr;
						}
						if(this.tabarTitle == '笔试'){
							dataArr = res.data.sr;
						}
						if(this.tabarTitle == '音标'){
							dataArr = res.data.sr;
						}
						if(this.tabarTitle == '典范'){
							dataArr =  res.data.sr;
						}
						if(this.tabarTitle == '新概念'){
							dataArr =  res.data.sr;
						}
						if(this.tabarTitle == '黑布林'){
							dataArr =  res.data.sr;
						}
						dataArr.forEach((item, index) => {
							// if(item.key) return
							if(this.nameList.indexOf(item.moduleName)==-1){
								this.nameList.push(item.moduleName)
							}
							Object.assign(item, {
								isMark: false,
								checkType:0,
								id:item.versionId
							})
							this.xuanzhede.forEach((items) => {
								if(item.versionId==items.versionId) {
									Object.assign(item, {
										checkType:items.checkType,
										isMark: true
									})
								}
							})
						})
						
						that.data = dataArr
						//console.log("===this.xuanzhede",this.xuanzhede)
						that.dataCopy = JSON.parse(JSON.stringify(that.data))
						this.xuanzhede.forEach(item=>{
							this.data.forEach((items,index)=>{
								//console.log("===item.productId == items.productId",item.productId == items.productId)
								if(item.versionId == items.versionId){
									item.isMark = true;
									this.data.splice(index, 1, item)
								}
							})
						})
						that.data.forEach((item,index)=>{
							that.xiugai(item.versionId)
						})
						that.chongxinjisuan();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}


				})
			},
			// calcCount() {
			// 	var that = this;
			// 	that.alarms = []
			// 	// let versionId=''
			// 	that.data.forEach(item => {
			// 		if (item.isMark == true) {
			// 			that.alarms.push(item);
			// 			// versionId=item.versionId
			// 			 this.xiugai(item.versionId)
			// 			if (this.alarms.length != 0) {
			// 				// this.shijiancdu = item.minute * that.alarms.length
			// 			} else {
			// 			}
			// 		}
			// 	});
			// 	this.xuanzhdeshuus = this.alarms
			// 	let alarms = [...this.xuanzhede,...this.alarms]
			// 		//console.log(alarms,'alarms,123')
			// 	this.xuanzhede = this.deduplicate(alarms,'id')
			// 	//console.log(this.xuanzhede ,'this.xuanzhede ')
			// 	// this.jige = this.xuanzhede
			// 	if (this.xuanzhede.length != 0) {
			// 		this.jige = this.xuanzhede.length
			// 	} else {
			// 		this.jige = 0
			// 		this.shijiancdu = 0
			// 	}
			// 	this.shijiancdu = this.totalSum(this.xuanzhede,'minute')
			//
			// 	uni.setStorageSync('xuanzhede', this.xuanzhede);
			// },
			//
			
			
			checkboxChange(e,index,items) {
				console.log("===e",e,index,items)
				this.data[index].tnum = this.dataCopy[index].tnum;
				this.data[index].minute = this.dataCopy[index].minute;
				var invoice = this.data[index]; //变量 invoice == 数组每一项索引
				let delItem = this.xuanzhede
				let sig={
					'pid':items.productId,
					'tid':items.versionId,
					"kechengId":items.versionId
				}
				if (invoice!=null) {
					if(!invoice.isMark){
						invoice.isMark = true;
					}else{
						invoice.isMark = false
					}
					this.data.splice(index,1,invoice);
				    let jjs=delItem.findIndex(item => item.versionId == invoice.versionId);
					if(jjs=='-1'){
						delItem.push(invoice);
						this.xiugai(items.versionId);
						let checkedList = [];
						console.log("===this.shujus",this.shujus);
						this.shujus.forEach((item, index) => {
							let itemVal = '';
							// if(this.tabarTitle == '跟读'){
							// 	itemVal = item.wId?item.wId:item.versionId
							// }
							// if(this.tabarTitle == '听说'||this.tabarTitle == '听力'){
							itemVal = String(index);
							// }
							checkedList.push(itemVal);
						})
						sig.ti=checkedList;
						// 检查数组中是否已存在具有相同 pid 的对象
						let existingItem = this.xuanzhede_ti.find(items => items.kechengId == sig.kechengId);
						if(existingItem){
							this.xuanzhede_ti.map((items)=>{
								if(sig.kechengId == items.kechengId){
									items.ti = checkedList
								}
							})
						}else{
							this.xuanzhede_ti.push(sig)
						}
					}else{
						delItem.forEach((item,index)=>{
							if(item.versionId==invoice.versionId){
								item.isMark = false
								this.xuanzhede.splice(jjs,1)
								let existingItem = this.xuanzhede_ti.findIndex(items => items.kechengId == sig.kechengId);
								this.xuanzhede_ti.splice(existingItem,1);
							}
						})
						this.xiugai(items.versionId)
					}
					uni.setStorageSync("xuanzhede_ti",this.xuanzhede_ti);
					uni.setStorageSync("xuanzhede", this.xuanzhede);
					this.chongxinjisuan();
				}
			},
			xiugai(id) {
				var that = this
				var data = {
					id: id,
					page: that.page,
					pageSize: that.pageSize,
				}
				let url = "";
				if(this.tabarTitle == '听说'){
					url = "hearsay/questions";
				}
				if(this.tabarTitle == '听力'){
					url = "listening/questions";
				}
				if(this.tabarTitle == '跟读'){
					url = "repeat/questions";
				}
				if(this.tabarTitle == '笔试'){
					url = "writing/questions";
				}
				if(this.tabarTitle == '音标'){
					url = "soundmark/questions";
				}
				if(this.tabarTitle == '典范'){
					url = "modelsp/questions";
				}
				if(this.tabarTitle == '新概念'){
					url = "newconcept/questions";
				}
				if(this.tabarTitle == '黑布林'){
					url = "blackplum/questions";
				}
				that.$post(url, data).then(res => {
					if (res.code != 0) {
						if(this.tabarTitle == '笔试'){
							that.shujus = res.data.resource.media_items?res.data.resource.media_items:res.data.resource.parts
							
						}
						if(this.tabarTitle == '跟读'){
							that.shujus = res.data.resource
							
						}
						if(this.tabarTitle == '听说'||this.tabarTitle == '听力'){
							that.shujus = res.data.resource.items
						}
						if(this.tabarTitle == '音标'){
							that.shujus = res.data.resource.media_items?res.data.resource.media_items:(res.data.resource.parts?res.data.resource.parts:res.data.resource);
						}
						if(this.tabarTitle == '新概念'){
							that.shujus = res.data.resource?res.data.resource:[]
						}
						if(this.tabarTitle == '黑布林'){
							that.shujus = res.data.resource
						}
						// todo 跟读需要单独处理下
						that.shujusAll.push(that.shujus)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},

			
			openEditor(id,title,keitem,keindex) {
			
				this.data.forEach(item=>{
									// //console.log(item.id)	
						if(item.versionId==id){
							//console.log(this.data,item.isMark)
							if(item.isMark==true){
								var data={
									isAllChecked:true
								}
								//console.log(keitem.tnum ,this.dataCopy[keindex],this.dataCopy[keindex].tnum,"===this.jige == this.dataCopy.length",keitem.tnum  ==this.dataCopy[keindex].tnum)
								if(keitem.tnum == this.dataCopy[keindex].tnum){
									data.isAllChecked=true
								}else{
									data.isAllChecked=false
								}
								//console.log(11)
								
								uni.navigateTo({
									url: `/pages/thirCatalogue/index?id=${id}&isAllChecked=${data.isAllChecked}&shuji_id=${this.id}&pid=${this.pid}&title=${title}&versionId=${item.versionId}&bartTitle=${this.tabarTitle}&kechengId=${item.versionId}`,
								});
							}else{
								var data={
									isAllChecked:false
								}
								//console.log(22)
								uni.navigateTo({
									url: `/pages/thirCatalogue/index?id=${id}&isAllChecked=${data.isAllChecked}&shuji_id=${this.id}&pid=${this.pid}&title=${title}&title=${title}&versionId=${item.versionId}&bartTitle=${this.tabarTitle}&kechengId=${item.versionId}`,
								});
							}
						}
					})
				
			},
			/** 数组去重
			 * 思路：利用数组原型对象上的 filter 和 includes 方法
			 * @param arr 需要去重的数组
			 * @param t 根据 t 字段(指定)进行去重
			 * @returns {*[]} 已去重后的数据
			 */
			deduplicate(arr, t = "") {
			  let newArr = []
			  // 有指定字段
			  if (t) {
			    newArr = arr.filter(function (item) {
			      return newArr.includes(item[t]) ? "" : newArr.push(item[t])
			    })
			  }
			  // 无指定字段
			  else {
			    newArr = arr.filter(function (item) {
			      return newArr.includes(item) ? "" : newArr.push(item)
			    })
			  }
			  return newArr
			},
			/** 数组去重结束**/
			handleClickNext(e) {
				uni.navigateTo({
					url: `/pages/submitWork/index?type=${this.tabarTitle}`,
				});
			},
			handleClickModal(e) {
				this.$refs.popup.open('bottom');
				// uni.navigateTo({
				// 	url: `/pages/submitWork/index`,
				// });
			},
			handleClosePopup() {
				this.$refs.popup.close();
			},
		}
	}
</script>

<style scoped>
	
	
	

	
	
	
	
	
	
	.check-not-full {
		border-color: #007aff;
		background-color: #007aff;
		.uni-checkbox-input {
			position: absolute;
			/* #ifdef APP-NVUE */
			top: 2px;
			/* #endif */
			/* #ifndef APP-NVUE */
			top: 1px;
			/* #endif */
			left: 3px;
			height: 6px;
			width: 9px;
			border-bottom-width: 1px;
			border-bottom-color: #e7e7e7;
			border-bottom-style: solid;
			transform-origin: center;
		}
	
	}
	.popup-title {
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		white-space: nowrap;
		line-height: 42rpx;
	}

	.popup-top {
		width: 100%;
		height: 98rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		box-sizing: border-box;
		background-color: rgba(248, 248, 248, 1);
		border-radius: 16rpx 16rpx 0px 0px;
	}

	.popup-close {
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 26rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		white-space: nowrap;
		line-height: 36rpx;
	}

	.popup-content {
		width: 100%;
		min-height: 384rpx;
		padding: 40rpx 32rpx 168rpx 40rpx;
		box-sizing: border-box;
		margin-bottom: 128rpx;
	}

	.popup-items {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.popup-course {
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		white-space: nowrap;
		line-height: 42rpx;
		width: 90%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.popup-delete {
		overflow-wrap: break-word;
		color: rgba(41, 121, 255, 1);
		font-size: 26rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		white-space: nowrap;
		line-height: 36rpx;
	}

	/* 弹窗结束 */



	.content {
		height: 100%;
		padding: 0 32rpx;
	}

	.title {
		display: block;
		margin: 30rpx 0 20rpx 16rpx;
	}

	.items {
		width: 686rpx;
		height: 184rpx;
		border-radius: 24rpx;
		background-color: rgba(41, 121, 255, 0.05);
		padding: 45rpx 26rpx;
		box-sizing: border-box;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-bottom: 24rpx;
		position: relative;
	}

	.detail {
		height: 120%;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 30rpx;
		width: 78%;
	}

	.name {
		overflow-wrap: break-word;
		color: rgba(34, 34, 34, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		white-space: nowrap;
		line-height: 40rpx;
	}

	.trainInfo {
		overflow-wrap: break-word;
		color: rgba(114, 122, 142, 1);
		font-size: 26rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		white-space: nowrap;
		line-height: 36rpx;
	}

	.label {
		color: rgba(41, 121, 255, 1);
		margin: 0 10rpx;
	}

	.editor {
		width: 48rpx;
		height: 48rpx;
	}

	.arranged {
		width: 82rpx;
		height: 80rpx;
		position: absolute;
		top: 0;
		right: 0;
		pointer-events: none;
	}
	.name{
		text-overflow: ellipsis;
		width: 100%;
		overflow: hidden;
	}
	
	
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: calc(100vw - 52rpx);
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:26rpx 32rpx;
	}
	.footerIos{
		padding: 30rpx 32rpx 0;
	}
	
	.footer-time {
		position: relative;
		display: flex;
		align-items: center;
	}
	
	.footer-icon {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
	}
	
	.footer-number {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 32rpx;
		top: -20rpx;
		width: 32rpx;
		height: 32rpx;
		color: #FFFFFF;
		font-size: 20rpx;
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, 1);
		box-shadow: 0 1px 8rpx 0 rgba(255, 0, 48, 0.2);
		background-color: rgba(244, 51, 60, 1);
	}
	
	.footer-text {
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		white-space: nowrap;
		line-height: 40rpx;
	}
	
	.footer-blue {
		color: rgba(41, 121, 255, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		white-space: nowrap;
		line-height: 40rpx;
		margin: 0 10rpx;
	}
	
	.footer-next {
		width: 240rpx;
		height: 88rpx;
		border-radius: 45rpx;
		border: 1px solid rgba(41, 121, 255, 1);
		color: rgba(41, 121, 255, 1);
		font-size: 30rpx;
		font-family: PingFangSC-Medium;
		font-weight: bold;
		text-align: center;
		line-height: 86rpx;
	}
</style>